<template>
  <div id="app">
    <div class="vui-full-calender">
      <div class="full-calendar">
        <lunar-full-calendar
          :events="events"
          ref="calendar"
          :config="config"
          @event-selected="onSelected"
          @event-drop="onDrop"
          @day-click="onDayClick"
        ></lunar-full-calendar>
      </div>
    </div>
  </div>
</template>

<script>
import { LunarFullCalendar } from 'vue-lunar-full-calendar'
export default {
  components: {
    LunarFullCalendar
  },
  data () {
    let self = this
    return {
      events: [{
        title: '值班',
        start: new Date()
      },
      {
        title: '查房',
        start: new Date()
      },
      {
        title: '看电影',
        start: new Date().getTime() + 24 * 60 * 60 * 1000,
        end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000
      },
      {
        title: '开会',
        start: new Date().getTime() - 3 * 24 * 60 * 60 * 1000,
        allDay: false
      }],
      config: {
        // 控制是否显示中国农历、显示的为true，隐藏为flase，默认为true(Control whether the Chinese calendar shows true, unrealistic flase, default true.)
        lunarCalendar: true,
        height: 'parent',
        locale: 'zh-cn',
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '日'
        },
        header: {
          left: 'prev,next, today',
          center: 'title',
          right: 'hide, custom, month,agendaWeek,agendaDay'
        },
        // eventOrder:'index',   // 这个是控制事件排序的功能，意思是 按照字段 事件数据中index来排序
        // eventLimitClick: 'day', //点击今天日列表图
        eventLimit: true, // 一天中显示多少条事件，多了隐藏
        eventLimitText: '更多',
        firstDay: 0, // 控制周一周日那个在前面
        defaultView: 'month',
        // allDaySlot: true, // agenda视图下是否显示all-day
        allDayText: '全天', // agenda视图下all-day的显示文本
        timezone: 'local', // 时区默认本地的
        slotLabelFormat: 'HH:mm', // 周视图和日视同的左侧时间显示
        viewRender (view, element) {
          self.viewRender(view, element)
        },
        customButtons: { // 新增按钮
          hide: {
            text: '隐藏农历',
            click () {
              self.$refs.calendar.fireMethod('option', {
                lunarCalendar: false
              })
              self.$refs.calendar.fireMethod('option', {
                header: {
                  left: 'prev,next, today',
                  center: 'title',
                  right: 'show, custom, month,agendaWeek,agendaDay'
                }
              })
            }
          },
          show: {
            text: '显示农历',
            click () {
              self.$refs.calendar.fireMethod('option', {
                lunarCalendar: true
              })
              self.$refs.calendar.fireMethod('option', {
                header: {
                  left: 'prev,next, today',
                  center: 'title',
                  right: 'hide, custom, month,agendaWeek,agendaDay'
                }
              })
            }
          }
        }
      }
    }
  },
  methods: {
    // 注释的是功能是可以修改对应的功能值属性，比如设置  eventLimit为 false
    //  this.$refs.calendar.fireMethod('option',{
    //      eventLimit :false
    //  })
    onDayClick (date, jsEvent, view) { // 点击当天的事件
      alert('农历数据：' + JSON.stringify(window.lunar(date._d)))
      console.log(date, jsEvent, 'onDayClick')
    },
    onSelected (event, jsEvent, view) { // 选中事件
      console.log(event, jsEvent, 'onSelected')
    },
    viewRender (view, element) {
      console.log(view, element, 'viewRender')
    },
    onDrop (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="less">
#app {
  margin: 5% 20%;
}
.vui-full-calender {
  height: 500px;
  .full-calendar {
    height: 100%;
    .fc-unthemed thead,
    .fc-unthemed .fc-content,
    .fc-unthemed th,
    .fc-unthemed td,
    .fc-unthemed tbody,
    .fc-unthemed .fc-row,
    .fc-unthemed .fc-list-view,
    .fc-unthemed .fc-popover,
    .fc-unthemed .fc-divider,
    .fc-unthemed .fc-list-heading td {
      border-color: #eaecf1;
    }
    .fc-header-toolbar {
      height: 30px;
      margin-bottom: 20px;
      line-height: 30px;
      h2 {
        font-size: 24px;
        color: #000;
      }
    }
    .fc-button {
      height: 30px;
      background: #fff;
      border-color: #fff;
      box-shadow: none;
      padding: 0;
    }
    .fc-today-button {
      font-size: 15px;
      color: @primary-color;
    }
    .fc-show-button,
    .fc-hide-button {
      position: relative;
      width: 80px;
      border: 1px solid #bbbfcd;
      border-radius: 0;
      font-size: 15px;
      color: #000;
    }
    .fc-next-button,
    .fc-prev-button {
      color: #7d8292;
    }
    .fc-button-group {
      font-size: 15px;
      button {
        width: 80px;
        color: #000;
        border: 1px solid #bbbfcd;
        border-radius: 0;
      }

      .fc-state-active {
        background: @primary-color;
        color: #fff;
        text-shadow: none;
      }
    }
    .fc-agendaDay-view,
    .fc-month-view,
    .fc-agendaWeek-view {
      .fc-widget-content {
        .fc-sun,
        .fc-sat {
          background: rgba(245, 246, 248, 0.6);
        }
        .fc-day-top {
          background: none;
        }
        .fc-day-number {
          font-size: 15px;
          letter-spacing: 0;
          line-height: 13px;
          float: left;
        }
        .fc-day-top {
          padding: 15px 12px 0 12px;
        }
        .fc-day-cnTerm,
        .fc-day-cnDate {
          font-size: 12px;
          color: #7d8292;
          float: right;
        }
        .fc-more {
          font-size: 12px;
          color: #7d8292;
        }
        .fc-event {
          cursor: pointer;
          font-size: 12px;
          color: #fff;
          background-color: @primary-color;
          border: 1px solid @primary-color !important;
          border-left: 2px solid @primary-color !important;
          border-radius: 0;
        }
        .fc-day-grid-event {
          padding: 1px 0 1px 5px;
        }
      }
    }
    .fc-agendaWeek-view,
    .fc-agendaDay-view {
      .fc-axis {
        font-size: 15px;
      }
      .fc-title {
        font-size: 15px;
        color: @primary-color;
      }
    }
    .fc-month-view {
      .fc-event {
        &.fc-not-start {
          border-left: 1px solid @primary-color !important;
        }
      }
    }
    .fc-agendaDay-view {
      .fc-head {
        table {
          margin: 15px 0;
        }
        .fc-day-header {
          display: none;
        }
      }
    }
    .fc-head {
      table {
        th {
          padding: 10px 0 15px 0;
          font-size: 15px;
          color: #000;
        }
      }
    }
  }
}
</style>
